<template>
  <div>
    <div class="mtb20">
      <zm-form :model="form" ref="searchForm" inline size="small">
        <zm-form-item prop="checkStatus" label="审批状态">
          <zm-data-radio is-btn v-model="form.checkStatus" :list="checkStatusList" @change="onSearch" />
        </zm-form-item>
        <div v-if="form.checkStatus === '1'">
          <zm-form-item prop="orderNo" label="销售单号">
            <zm-input v-model="form.orderNo" placeholder="请输入销售单号" class="w260"></zm-input>
          </zm-form-item>
          <zm-form-item prop="accountIds" label="所属业务员">
            <zm-data-select v-model="form.accountIds" api="getSaleList" class="w260" placeholder="请选择所属业务员"></zm-data-select>
          </zm-form-item>
          <zm-form-item>
            <zm-button t="search" @click="onSearch">查询</zm-button>
            <zm-button t="reset" @click="toReset">重置</zm-button>
          </zm-form-item>
        </div>
      </zm-form>
      <div class="tr" v-if="form.checkStatus === '3'">
        <span class="mr10">退货记录（共{{ tableParams.total }}条）</span>
        <span v-if="infoData.type !== '7'">
          <span class="mr10">退货总数量：<span class="text-primary">{{
            totalInfo.refundTotalNumber
          }}</span></span>
          <span class="mr10">剩余数量：<span class="text-primary">{{ totalInfo.residueAllNumber }}</span></span>
        </span>
        <span class="mr10">退货金额：<span class="text-primary">￥{{ totalInfo.refundTotalAmount }}</span></span>
      </div>
    </div>
    <zm-table-data :data="tableParams.data" :columns="columns" :fetch="loadList" :table-params="tableParams"></zm-table-data>
    <return-detail v-if="returnVisible" v-model="returnVisible" :business-id="currentRefundId" :return-order-id="currentOrderId"></return-detail>
  </div>
</template>

<script>
import tableMixin from '@/mixins/zmTableMixin'
import approveMixin from '@/mixins/approveMixin'
import { returnGoodsColumns } from './const'
import approveProcessApis from '@/api/src/approve'
import saleOrderApi from '@/api/src/saleOrder'
import ReturnDetail from './ReturnDetail'
import { PROCESS_TYPE } from '@/model'

export default {
  components: { ReturnDetail },
  mixins: [tableMixin, approveMixin],
  props: {
    infoData: {
      type: Object,
      default () {
        return {}
      }
    },
    businessId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      form: {
        // 审批状态，1审批中，2审批驳回，3审批通过，4已撤销，0未提交
        checkStatus: '3',
        orderNo: '',
        accountIds: ''
      },
      checkStatusList: [
        {
          name: '已通过',
          value: '3'
        },
        {
          name: '已撤销',
          value: '4'
        },
        {
          name: '被驳回',
          value: '2'
        },
        {
          name: '审批中',
          value: '1'
        }
      ],
      totalInfo: {},
      returnVisible: false,
      currentOrderId: '', // 销售单的id
      currentRefundId: '', // 退货用的业务id
      processType: PROCESS_TYPE.saleOrderRefund
    }
  },
  computed: {
    columns () {
      return returnGoodsColumns(this)
    }
  },
  created () { },
  methods: {
    async loadList () {
      const res = await saleOrderApi.getRefundPageList(
        this.assignQuery({ ...this.form, orderId: this.businessId })
      )
      this.initialTableData(res.list, res.count)
      this.totalInfo = {
        refundTotalNumber: res.refundTotalNumber,
        refundTotalAmount: res.refundTotalAmount,
        residueAllNumber: res.residueAllNumber
      }
    },
    toReset () {
      this.$set(this.form, 'orderNo', '')
      this.$set(this.form, 'accountIds', '')
      this.onReset()
    },
    onDetail (row) {
      // 跳转到退货详情
      this.currentOrderId = row.orderId
      this.currentRefundId = row.id
      this.returnVisible = true
    },
    async onDelete (row) {
      await saleOrderApi.deleteRefund({ id: row.id })
      this.$message.success('删除成功!')
      this.onSearch()
    },
    async submitAppro (row) {
      await approveProcessApis.submit({
        businessId: row.id,
        processType: this.processType,
        linkName: row.orderName + row.orderNo + row.customerName // 待对接
      })
      this.$message.success('成功提交审批!')
      this.onSearch()
    },
    cancelAppro (row) {
      this.$msg
        .confirm('该审批流已开始，确定撤销审批？', '撤销审批')
        .then(async () => {
          await approveProcessApis.cancel({
            businessId: row.id,
            processType: this.processType
          })
          this.$msg.success()
          this.onSearch()
        })
    }
  }
}
</script>
